<template>
  <div>
    <el-date-picker
      v-model="selectedQuarter"
      type="month"
      :placeholder="placeholder"
      :format="displayFormat"
      :value-format="valueFormat"
      :picker-options="pickerOptions"
      @change="handleQuarterChange"
      size="mini"
    ></el-date-picker>
  </div>
</template>

<script>
export default {
  props: {
    // 外部传入的默认值（如"2025-1"）
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "选择季度",
    },
  },
  data() {
    return {
      isNowJD: "",
      selectedQuarter: "", // 内部绑定值（临时存储月份格式）
      displayFormat: "", // 显示给用户的格式
      valueFormat: "yyyy-MM", // 内部处理用的月份格式
      pickerOptions: {
        // 只允许选择每个季度的第一个月
        disabledDate(date) {
          const month = date.getMonth() + 1; // 转换为1-12月
          return ![1, 4, 7, 10].includes(month);
        },
        // 月份面板标题显示为季度
        monthFormat: "yyyy年第Q季度",
        // 点击月份后自动关闭面板
        onPick: ({ maxDate }) => {
          if (maxDate) {
            this.$nextTick(() => {
              const closeBtn = document.querySelector(".el-date-picker__close");
              closeBtn && closeBtn.click();
            });
          }
        },
      },
    };
  },
  watch: {
    // 监听外部传入的value，同步到组件内部
    value(val) {
      if (val) {
        this.selectedQuarter = this.convertQuarterToMonth(val);
      }
    },
  },
  methods: {
    // 处理季度变更，转换为2025-1格式
    handleQuarterChange(val) {
      if (!val) return;

      // 解析月份格式（如"2025-01"）
      const [year, month] = val.split("-").map(Number);

      // 计算季度（1-4）
      const quarter = month === 1 ? 1 : month === 4 ? 2 : month === 7 ? 3 : 4;

      // 转换为"2025-1"格式并emit
      this.$emit("input", `${year}-${quarter}`);
      this.displayFormat = year + "-" + quarter;
      this.pickerOptions.monthFormat = year + "-" + quarter;
    },
    // 将"2025-1"格式转换为月份格式（供回显用）
    convertQuarterToMonth(quarterStr) {
      if (!quarterStr) return "";

      const [year, quarter] = quarterStr.split("-").map(Number);
      const month =
        quarter === 1
          ? "01"
          : quarter === 2
          ? "04"
          : quarter === 3
          ? "07"
          : "10";

      return `${year}-${month}`;
    },
  },
  mounted() {
    // 初始化时同步外部值
    if (this.value) {
      this.selectedQuarter = this.convertQuarterToMonth(this.value);
    }
  },
};
</script>
